<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/include.jsp"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下放至用户</title>
<script type="text/javascript">
	
	Ext.onReady(initBt);
	var win;
	var sm;
	var selected;
	function showUserWindow(){
		if (win){
			win.show();
			return;
		}
		
		var store = new Ext.data.JsonStore({
		    url: '/user/grantMyRight!searchUser.action',
		    totalProperty: 'count',
		    root: 'res',
		    id: 'id',
		    fields: [
		      {name: 'name'},
		      {name: 'id'},{name:'userInfo.name'},'userInfo.university', ]
		});
		//var pager = new Ext.PagingToolbar({store:store});
		sm = new Ext.grid.CheckboxSelectionModel();
		var searchUserPanel = new Ext.grid.GridPanel({
			store:store,
			sm:sm,
			columns: [
					  sm,
					  {header: "账户名",dataIndex: 'name',sortable:true,menuDisabled:true},
			          {header: "姓名",dataIndex: 'userInfo.name',sortable:true,menuDisabled:true},
			          {header: "学校",dataIndex: 'userInfo.university',sortable:true,menuDisabled:true}
			         ],
			 height:400
			});
		
		var button = new Ext.Button({text:'搜索',handler:function(){
			store.load();
			}});
		var reset = new Ext.Button({text:'清空',handler:function(){
			name.setValue('');
			}});
		var name = new Ext.form.TextField();
		var pager = new Ext.PagingToolbar({store:store});
		store.on('beforeload',function(store,options){
				var params = options.params || {};
			 	params['user.name'] = name.getValue();
			    params['start'] = 0;
			    options.params = params;
			 	return true;
			});
		//button.render(Ext.getBody());
		 win = new Ext.Window({title:'选择用户',
			width       :700,
            height		:400,
            closable:false,
            layout:'border',
            items:[{region: 'north',layout:'table',autoHeight:true,
                	items:
                    	[{xtype:'label',text:'姓名:'},name,
						button,reset
                       	]}
                  ,
                  {region: 'center',items:searchUserPanel}
                   
                   ],
            bbar:pager,
            buttons: [
		                {
		                    text     : '确定',
		                    disabled : false,
		                    handler  :function(){
		                    selected = sm.getSelections();
		                    showUsers(selected);
		                    win.hide();}
		                },
		                {
		                    text     : '取消',
		                    disabled : false,
		                    handler  :function(){
		                    if (selected){
		                    	sm.selectRecords(selected,false);
		                    }
		                    else{
		                    	sm.clearSelections();
				            }
		                    win.hide();}
		                }]
			});
		win.show();
		 
		
		store.load();
		
	};
	function initBt(){
		Ext.get("userBt").on('click',showUserWindow);
		
	}
	function showUsers(users){
         var template1 = new Ext.XTemplate('<tpl for=".">','{[values.get("name")]},','</tpl>');
         template1.overwrite('userNames',users);
         template1 = new Ext.XTemplate('<tpl for=".">','<input name="users[{# - 1}].id" type="hidden"',
                 'value={[values.get("id")]} />','</tpl>');
         template1.overwrite('users',users);
	}
	
</script>
</head>
<body>
<div class="tleft"></div>
<div class="tright"></div>
<div class="tbg">下放至用户</div>
<s:form namespace="/user" action="grantMyRight!grantMyRight.action">
	<s:hidden name="roleId"/>
	<div id="users"></div>
	<table cellpadding="1" cellspacing="1"  class="tableInput">
		<tr>
		<td width="15%" class="tableHeader2">角色名:</td>
		<td width="19%" class="tableHeader3"><s:property value="role.name"/></td>
		</tr>
		<tr>
		<td width="15%" class="tableHeader2">可使用:</td>
		<td width="19%" class="tableHeader3">
			<s:checkbox  name ="canUse"></s:checkbox>
		</td>
		</tr>
		<tr>
		<td width="15%" class="tableHeader2">可分配:</td>
		<td width="19%" class="tableHeader3">
		 <s:checkbox name ="canGrant"></s:checkbox>
		</td>
		
		</tr>
		<tr>
		<td width="15%" class="tableHeader2">用户点&nbsp;&nbsp;<a href="#" id="userBt">击选择用户</a>:</td>
		<td width="19%" class="tableHeader3">
		 	<div id="userNames"></div>
		</td>
		
		</tr>
	</table>
	
<div class="tableHeader4">
	<s:submit cssClass="btn_Text2" value="提交" ></s:submit>
	<input  type="reset" class="btn_Text2"  value="重置" />
	<input name="back" type="button" class="btn_Text2"  value="返回" onclick="location.href='grantMyRight.action'" />
</div>
</s:form>
</body>
</html>